<template xmlns="http://www.w3.org/1999/html">
  <div>
    <el-row :gutter="130">
      <el-col :span="8">
        <el-card class="box-card">
          <span>菜单选项:</span>
          <br/>
          <el-button size="mini" type="primary" @click="menuFrom={},menuFrom.meta={}">添加</el-button>
          <el-tree
            :data="menuData"
            node-key="id"
            ref="tree"
            highlight-current
            @node-click="handleNodeClick"
            :props="defaultProps"
          >
          </el-tree>


        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <span>菜单添加:</span>
          <br/>

          <el-form ref="form" :model="menuFrom" label-width="120px">
            <el-form-item label="父菜单:">
              <a-tree-select
                v-model="menuFrom.parentId"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="menuData"
                :replaceFields="replaceFields"
                placeholder="请选择您的父菜单"
              >
    <span slot-scope="scope" style="color: #08c">
       {{ scope.title }}
    </span>
              </a-tree-select>
            </el-form-item>
            <el-form-item label="菜单唯一标识:">
              <el-input placeholder="请输入菜单唯一标识" v-model="menuFrom.name"/>
            </el-form-item>

            <el-form-item label="菜单标题:">
              <el-input placeholder="请输入菜单标题" v-model="menuFrom.meta.title"/>
            </el-form-item>

            <el-form-item label="路由URL:">
              <el-input placeholder="请输入路由URL" v-model="menuFrom.path"/>
            </el-form-item>

            <el-form-item label="组件URL:">
              <el-input placeholder="请输入组件URL" v-model="menuFrom.component"/>
            </el-form-item>

            <el-form-item label="图标:">
              <el-input placeholder="请输入图标路径" v-model="menuFrom.meta.icon"/>
            </el-form-item>

            <el-form-item label="状态:">
              <el-radio :label="true" v-model="menuFrom.isEnable">启用</el-radio>
              <el-radio :label="false" v-model="menuFrom.isEnable">禁用</el-radio>
            </el-form-item>

            <el-form-item label="是否固定在头部:">
              <el-radio label="true" v-model="menuFrom.meta.affix">是</el-radio>
              <el-radio label="false" v-model="menuFrom.meta.affix">否</el-radio>
            </el-form-item>
          </el-form>


          <el-button type="primary" v-if="menuFrom.id&&menuFrom.id!==''" @click="addAuthMenu">
            修改
          </el-button>
          <el-button type="primary" v-else @click="addAuthMenu">
            添加
          </el-button>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <span>权限信息:</span>
          <br/>
          <el-button :disabled="addResourceButtonFlag" size="mini" type="primary"
                     @click="resourceBoolean=true,title='权限添加'"
          >添加
          </el-button>


          <el-table
            :data="resourceData"
            style="width: 100%"
          >
            <el-table-column
              prop="code"
              label="资源编码"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="接口名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="method"
              label="请求方法"
            >
            </el-table-column>

            <el-table-column
              prop="url"
              label="请求地址"
            >
            </el-table-column>

            <el-table-column
              prop="describe"
              label="接口描述"
            >
            </el-table-column>

            <el-table-column
              label="操作"
              fixed="left"
            >
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="title='权限修改',resourceFrom=scope.row,resourceBoolean=true">
                  修改
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <a-modal
      :title="title"
      :visible="resourceBoolean"
      :confirm-loading="resourceFalg"
      @ok="handleOk"
      okText="确认"
      @cancel="handleCancel"
      cancelText="取消"
    >
      <el-form ref="form" :model="resourceFrom" label-width="80px">
        <el-form-item label="编码:">
          <el-input placeholder="请输入权限编码" v-model="resourceFrom.code"/>
        </el-form-item>
        <el-form-item label="名称:">
          <el-input placeholder="请输入权限名称" v-model="resourceFrom.name"/>

        </el-form-item>

        <el-form-item label="请求方式:">
          <el-select v-model="resourceFrom.method" placeholder="请选择请求方式">
            <el-option label="GET" value="GET"/>
            <el-option label="POST" value="POST"/>
            <el-option label="DELETE" value="DELETE"/>
            <el-option label="PUT" value="PUT"/>
          </el-select>

        </el-form-item>

        <el-form-item label="请求地址">
          <el-input placeholder="请输入请求URL" v-model="resourceFrom.url"/>

        </el-form-item>

        <el-form-item label="描述">
          <el-input placeholder="请输入权限描述" v-model="resourceFrom.describe" type="textarea"/>
        </el-form-item>
      </el-form>
    </a-modal>
  </div>
</template>

<script>
import menu from '@/api/auth/menu/index'

export default {
  name: 'index',
  data() {
    return {
      addResourceButtonFlag: true,
      title: '',
      resourceBoolean: false,
      resourceFalg: false,
      resourceData: [],
      resourceFrom: {
        id: '',//ID
        code: '',//资源编码 规则：链接：数据列：按钮：
        name: '',//接口名称
        menuId: '',//菜单ID#c_auth_menu
        method: '',//请求方法
        url: '',//请求路径
        describe: ''//接口描述
      },
      menuFrom: {
        parentId: '',//父id
        name: '',//名称
        path: '',//路径
        component: '',//组件
        isEnable: true,//状态
        meta: {
          icon: '',//图标
          title: '',//标题
          affix: ''//是否显示在头部
        }
      },
      replaceFields: {
        children: 'children',
        title: 'name',
        value: 'id'
      },
      menuData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    handleOk() {

      menu.addOrUpdateAuthResource(this.resourceFrom).then(data => {
        this.resourceFrom.id='';
        this.resourceFrom.code = ''
        this.resourceFrom.name = ''
        this.resourceFrom.method = ''
        this.resourceFrom.url = ''
        this.resourceFrom.describe = ''
        this.$message({
          type: 'success',
          showClose: true,
          message: '操作成功!'
        })
        menu.queryAllAuthResource(this.resourceFrom.menuId).then(data => {
          this.resourceData = data.data
        })
        this.resourceBoolean = false
      })
    },
    handleCancel() {
      this.resourceFrom.id='';
      this.resourceBoolean = false
      this.resourceFrom.code = ''
      this.resourceFrom.name = ''
      this.resourceFrom.method = ''
      this.resourceFrom.url = ''
      this.resourceFrom.describe = '';
      menu.queryAllAuthResource(this.resourceFrom.menuId).then(data =>{
        this.resourceData=data.data;
      })
    },
    addAuthMenu() {
      menu.addAuthMenu(this.menuFrom).then(data => {
        this.$message({
          showClose: true,
          message: '操作成功!',
          type: 'success'
        })
        this.menuFrom = {}
        this.menuFrom.meta = {}
        // this.findAllAuthMenu();
        this.$router.go(0)

      })
    },
    handleNodeClick(data) {
      this.menuFrom = data
      this.resourceFrom.menuId = data.id
      menu.queryAllAuthResource(data.id).then(data => {
        this.resourceData = data.data
      })
      this.addResourceButtonFlag = false
    },
    findAllAuthMenu() {
      menu.findAllAuthMenu().then(data => {
        this.menuData = data.data
      })
    }
  }, mounted() {
    this.findAllAuthMenu()
  }

}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
